<#include "../common/layout/__mainlayout.html">
<#include "../common/__pagination.html">

<#assign pageBreadCrumbs>
    <li class="active"><a href="#">应用管理</a></li>
    <li class="active">分类管理</li>
</#assign>

<#assign pageCss>
    <!-- page specific plugin styles -->
    <link rel="stylesheet" href="${ctx}/static/admin/assets/css/jquery-ui.custom.css" />
    <link rel="stylesheet" href="${ctx}/static/admin/assets/css/chosen.css" />
    <link rel="stylesheet" href="${ctx}/static/admin/assets/css/datepicker.css" />
    <link href="${ctx}/static/admin/assets/treeTable/v3.0.0/css/jquery.treetable.css" rel="stylesheet" type="text/css" />
    <link href="${ctx}/static/admin/assets/treeTable/v3.0.0/css/jquery.treetable.theme.default.css" rel="stylesheet" type="text/css" />
</#assign>
<#assign pageJavascript>


<script src="${ctx}/static/admin/assets/treeTable/v3.0.0/js/jquery.treetable.js"> </script>
<script>
    <#if query.categoryName??>
    $("#contentTable").treetable({expandable: false});
        <#else>
            $("#contentTable").treetable({expandable: true});
    </#if>
</script>

    <script type="text/javascript">
        $(document).ready(function(){

            if(!ace.vars['touch']) {
                $('.chosen-select').chosen({allow_single_deselect:true});
            }

            $("#editModal").on("hidden.bs.modal", function(){
                $(this).removeData("bs.modal");
            });

            // 删除按钮
            $("#contentTable").on(ace.click_event,'a.delete', function(e){
                var $self = $(this);
                var currentA = this;
                e.preventDefault();
//                bootbox.setDefaults({locale:"zh_CN"});
                bootbox.confirm({
                            message: "确定删除该分类?",
                            buttons: {
                                confirm: {
                                    label: "确定",
                                    className: "btn-primary btn-sm"
                                },
                                cancel: {
                                    label: "取消",
                                    className: "btn-sm"
                                }
                            },
                            callback: function(result) {
                                if(result){
                                    $.ajax({
                                        type: "POST",
                                        url: $(currentA).attr("href"),
                                        dataType: 'text',
                                        success: function(msg){
                                            var msg = eval("("+msg+")");
                                            if(msg.result == "success"){
                                                alert("删除成功");
                                                var parentId=$self.closest('tr').attr("data-tt-parent-id");
                                                //  $("#contentTable").treetable("removeNode",parentId);
                                               $self.closest('tr').remove();
                                             /* var tts=  $("[data-tt-parent-id=" + parentId + "]");
                                                if(tts.length==0){
                                                    var $pNode=  $("[data-tt-id=" + parentId + "]");
                                                    $pNode.find("a [title=Collapse]").remove();
                                                }*/
                                              //  window.location.href = "${ctx}/admin/category/list.html";
                                            }else{
                                                alert(msg.messages);
                                                //bootbox.alert(msg.messages);
                                            }
                                        },
                                        error: function(){
                                            bootbox.alert("删除失败");
                                        }
                                    });
                                    //window.location.href = $(currentA).attr("href");
                                }
                            }
                        }
                );
            });
            //隐藏
            $("#contentTable").on(ace.click_event,'a.stateCategory',function(e){
                var $self = $(this);
                var currentA = this;
                var $tr = $self.closest('tr');
                e.preventDefault();
//                bootbox.setDefaults({locale:"zh_CN"});
                bootbox.confirm({
                            message: "确定显示隐藏该分类?",
                            buttons: {
                                confirm: {
                                    label: "确定",
                                    className: "btn-primary btn-sm"
                                },
                                cancel: {
                                    label: "取消",
                                    className: "btn-sm"
                                }
                            },
                            callback: function(result) {
                                if(result){
                                    $.ajax({
                                        type: "POST",
                                        url: $(currentA).attr("href"),
                                        dataType: 'text',
                                        success: function(msg){
                                            var msg = eval("("+msg+")");
                                            if(msg.result == "success"){
                                                var url=$(currentA).attr("href");
                                                if(url.indexOf("&state=0")!=-1){
                                                    $tr.children(".showorhide").html("隐藏");
                                                    $(currentA).attr("href",url.replace("&state=0","&state=1"));
                                                    $(currentA).html("<span class='label label-info'>显示</span>");
                                                }else{
                                                    $tr.children(".showorhide").html("显示");
                                                    $(currentA).attr("href",url.replace("&state=1","&state=0"));
                                                    $(currentA).html("<span class='label label-info'>隐藏</span>");
                                                }
                                                alert("操作成功");
                                                //  window.location.href = "${ctx}/admin/category/list.html";
                                            }else{
                                                alert(msg.messages);
                                                //bootbox.alert(msg.messages);
                                            }
                                        },
                                        error: function(){
                                            bootbox.alert("操作失败");
                                        }
                                    });
                                    //window.location.href = $(currentA).attr("href");
                                }
                            }
                        }
                );
            });
         /*   $("#search").on(ace.click_event, function(){
                $("#pageNo").val(1);
                $("#searchForm").submit();
            });*/
        });

      /*  function page(pageNum) {
            $("#pageNo").val(pageNum);
            $("#searchForm").submit();
        }*/
    </script>
</#assign>

<@mainlayout pageBreadCrumbs=pageBreadCrumbs pageCss=pageCss pageJavascript=pageJavascript currentMenu="ApplicationFlag-categoryFlag">
    <div class="row">
        <div class="col-xs-12">
            <form id="searchForm" action="${ctx}/admin/category/list.html" class="form-search form-inline" method="GET">
                <label class="col-xs-1 text-right">分类名:</label><input type="text" id="categoryName"  name="categoryName" class="input-sm col-xs-2" value="${query.categoryName!}"/>&nbsp;
                <input type="submit" id="searchBtn" class="btn btn-sm btn-primary" value="查询"/>&nbsp;
                <a href="${ctx}/admin/category/add.html" class="btn btn-sm btn-warning" data-toggle="modal" data-target="#editModal"><i class="ace-icon fa fa-plus"></i>添加</a>

            <table id="contentTable" class="treetable table table-striped table-bordered table-hover">
                <thead>
                <tr>
                    <th width="20" align="left" >分类名</th>
                    <th width="20" align="center" >图标</th>
                    <th width="40" align="center" >分类ID</th>
                    <th width="40" align="center" >父类ID</th>
                    <th width="70" align="left" >排序号</th>
                    <th width="100" align="left" >分类标识</th>
                    <th width="40" align="center" >操作</th>
                </tr>
                </thead>

                <tbody>
                <#list pageList.listData as category>
                    <tr data-tt-id="${category.id!}" >
                        <td>
                            <#if category.hasSub==1>

                                <span class="folder ui-draggable">${category.categoryName!}</span>
                                <#else>
                                    <span class="folder ui-draggable">${category.categoryName!}</span>
                            </#if>
                        </td>
                        <td><img height="64" width="64" src="${staticHost}/${category.iconUrl!}" onerror="this.src='${ctx}/static/admin/assets/img/imgerror.png'"></td>
                        <td>${category.id!}</td>
                        <td>${category.parentId!}</td>
                        <td>${category.sortIndex!}</td>
                        <td class="showorhide"><#if category.state == 1> <div>显示</div> <#else> <div>隐藏</div> </#if></td>
                        <td>
                            <div class="hidden-sm hidden-xs action-buttons">
                               <#if category.level lt 3>
                                <a class="orange tooltip-success addSub" href="${ctx}/admin/category/add.html?parentId=${category.id!}" data-rel="tooltip" title="添加子分类" data-toggle="modal" data-target="#editModal"><span class="label label-success">添加子分类</span></a>
                               </#if>
                                <a class="green tooltip-success edit" href="${ctx}/admin/category/view.html?id=${category.id!}" data-rel="tooltip" title="编辑" data-toggle="modal" data-target="#editModal"><span class="label label-success">编辑</span></a>
                                <#if category.state == 1>
                                <a class="grey tooltip-success stateCategory" href="${ctx}/admin/category/state.do?id=${category.id!}&state=0" data-rel="tooltip" > <span class="label label-info">隐藏</span></a>
                               <#else>
                                <a class="light-grey tooltip-success stateCategory" href="${ctx}/admin/category/state.do?id=${category.id!}&state=1" data-rel="tooltip"><span class="label label-info">显示</span></a>
                               </#if>
                                <a class="red tooltip-error delete" href="${ctx}/admin/category/delete.do?id=${category.id!}" data-rel="tooltip" title="删除" data="${category.id!}"><span class="label label-danger">删除</span></a>
                            </div>

                            <div class="hidden-md hidden-lg">
                                <div class="inline position-relative">
                                    <button class="btn btn-minier btn-yellow dropdown-toggle" data-toggle="dropdown" data-position="auto">
                                        <i class="ace-icon fa fa-caret-down icon-only bigger-120"></i>
                                    </button>

                                    <ul class="dropdown-menu dropdown-only-icon dropdown-yellow dropdown-menu-right dropdown-caret dropdown-close">

                                        <#if category.level lt 3>
                                            <li><a href="${ctx}/admin/category/add.html?parentId=${category.id!}" class="tooltip-success addSub" data-rel="tooltip" title="添加子分类" data-toggle="modal" data-target="#editModal"> <span class="green"><i class="ace-icon fa fa-pencil-square-o bigger-120"></i></span></a></li>
                                        </#if>
                                        <li><a href="${ctx}/admin/category/view.html?id=${category.id!}" class="tooltip-success edit" data-rel="tooltip" title="编辑" data-toggle="modal" data-target="#editModal"> <span class="green"><i class="ace-icon fa fa-pencil-square-o bigger-120"></i></span></a></li>
                                        <#if category.state == 1>
                                             <li><a href="${ctx}/admin/category/state.do?id=${category.id!}&state=0" class="tooltip-success stateCategory" data-rel="tooltip"  > <span class="green"><i class="ace-icon fa fa-pencil-square-o bigger-120"></i></span></a></li>
                                            <#else>
                                                <li><a href="${ctx}/admin/category/state.do?id=${category.id!}&state=1" class="tooltip-success stateCategory" data-rel="tooltip" > <span class="green"><i class="ace-icon fa fa-pencil-square-o bigger-120"></i></span></a></li>
                                       </#if>


                                           <li><a href="${ctx}/admin/category/delete.do?id=${category.id!}" class="tooltip-error delete" data-rel="tooltip" title="删除" data="${category.id!}"> <span class="red"><i class="ace-icon fa fa-trash-o bigger-120"></i></span></a></li>
                                    </ul>
                                </div>
                            </div>
                        </td>
                    </tr>
                    <#if category.hasSub==1>
                        <#list category.subCategoryList as subCategory>
                        <tr data-tt-id="${subCategory.id!}" data-tt-parent-id="${subCategory.parentId!}"  >
                            <td style="padding-left: 2em">
                                <#if subCategory.hasSub==1>
                                    <span class="folder ui-draggable">${subCategory.categoryName!}</span>
                                    <#else>
                                        <span class="folder ui-draggable">${subCategory.categoryName!}</span>
                                </#if>
                            </td>
                            <td><img height="64" width="64" src="${subCategory.iconUrl!} " onerror="this.src='${ctx}/static/admin/assets/img/imgerror.png'"></td>
                            <td>${subCategory.id!}</td>
                            <td>${subCategory.parentId!}</td>
                            <td>${subCategory.sortIndex!}</td>
                            <td class="showorhide"><#if subCategory.state == 1> <div>显示</div> <#else> <div>隐藏</div> </#if></td>
                            <td>
                                <div class="hidden-sm hidden-xs action-buttons">
                                    <#if subCategory.level lt 3>
                                        <a class="orange tooltip-success addSub" href="${ctx}/admin/category/add.html?parentId=${subCategory.id!}" data-rel="tooltip" title="添加子分类" data-toggle="modal" data-target="#editModal"><span class="label label-success">添加子分类</span></a>
                                    </#if>
                                    <a class="green tooltip-success edit" href="${ctx}/admin/category/view.html?id=${subCategory.id!}" data-rel="tooltip" title="编辑" data-toggle="modal" data-target="#editModal"><span class="label label-success">编辑</span></a>
                                    <#if subCategory.state == 1>
                                        <a class="grey tooltip-success stateCategory" href="${ctx}/admin/category/state.do?id=${subCategory.id!}&state=0" data-rel="tooltip" > <span class="label label-info">隐藏</span></a>
                                        <#else>
                                            <a class="light-grey tooltip-success stateCategory" href="${ctx}/admin/category/state.do?id=${subCategory.id!}&state=1" data-rel="tooltip" ><span class="label label-info">显示</span></a>
                                    </#if>
                                    <a class="red tooltip-error delete" href="${ctx}/admin/category/delete.do?id=${subCategory.id!}" data-rel="tooltip" title="删除" data="${subCategory.id!}"><span class="label label-danger">删除</span></a>
                                </div>

                                <div class="hidden-md hidden-lg">
                                    <div class="inline position-relative">
                                        <button class="btn btn-minier btn-yellow dropdown-toggle" data-toggle="dropdown" data-position="auto">
                                            <i class="ace-icon fa fa-caret-down icon-only bigger-120"></i>
                                        </button>

                                        <ul class="dropdown-menu dropdown-only-icon dropdown-yellow dropdown-menu-right dropdown-caret dropdown-close">

                                            <#if subCategory.level lt 3>
                                                <li><a href="${ctx}/admin/category/add.html?parentId=${subCategory.id!}" class="tooltip-success addSub" data-rel="tooltip" title="添加子分类" data-toggle="modal" data-target="#editModal"> <span class="green"><i class="ace-icon fa fa-pencil-square-o bigger-120"></i></span></a></li>
                                            </#if>
                                            <li><a href="${ctx}/admin/category/view.html?id=${subCategory.id!}" class="tooltip-success edit" data-rel="tooltip" title="编辑" data-toggle="modal" data-target="#editModal"> <span class="green"><i class="ace-icon fa fa-pencil-square-o bigger-120"></i></span></a></li>
                                            <#if subCategory.state == 1>
                                                <li><a href="${ctx}/admin/category/state.do?id=${subCategory.id!}&state=0" class="tooltip-success stateCategory" data-rel="tooltip" title="隐藏" > <span class="green"><i class="ace-icon fa fa-pencil-square-o bigger-120"></i></span></a></li>
                                                <#else>
                                                    <li><a href="${ctx}/admin/category/state.do?id=${subCategory.id!}&state=1" class="tooltip-success stateCategory" data-rel="tooltip" title="显示" > <span class="green"><i class="ace-icon fa fa-pencil-square-o bigger-120"></i></span></a></li>
                                            </#if>


                                            <li><a href="${ctx}/admin/category/delete.do?id=${subCategory.id!}" class="tooltip-error delete" data-rel="tooltip" title="删除" data="${subCategory.id!}"> <span class="red"><i class="ace-icon fa fa-trash-o bigger-120"></i></span></a></li>
                                        </ul>
                                    </div>
                                </div>
                            </td>
                        </tr>
                            <#if subCategory.hasSub==1>
                                <#list subCategory.subCategoryList as subCategory2>
                                    <tr data-tt-id="${subCategory2.id!}" data-tt-parent-id="${subCategory2.parentId!}"  >
                                        <td  style="padding-left: 4em">
                                            <#if subCategory2.hasSub==1>
                                                <span class="folder ui-draggable">${subCategory2.categoryName!}</span>
                                                <#else>
                                                    <span class="folder ui-draggable">${subCategory2.categoryName!}</span>
                                            </#if>
                                        </td>
                                        <td><img height="64" width="64" src="${subCategory2.iconUrl!}" onerror="this.src='${ctx}/static/admin/assets/img/imgerror.png'"></td>
                                        <td>${subCategory2.id!}</td>
                                        <td>${subCategory2.parentId!}</td>
                                        <td>${subCategory2.sortIndex!}</td>
                                        <td class="showorhide"><#if subCategory2.state == 1> <div>显示</div> <#else> <div>隐藏</div> </#if></td>
                                        <td>
                                            <div class="hidden-sm hidden-xs action-buttons">
                                                <#if subCategory2.level lt 3>
                                                    <a class="orange tooltip-success addSub" href="${ctx}/admin/category/add.html?parentId=${subCategory2.id!}" data-rel="tooltip" title="添加子分类" data-toggle="modal" data-target="#editModal"><span class="label label-success">添加子分类</span></a>
                                                </#if>
                                                <a class="green tooltip-success edit" href="${ctx}/admin/category/view.html?id=${subCategory2.id!}" data-rel="tooltip" title="编辑" data-toggle="modal" data-target="#editModal"><span class="label label-success">编辑</span></a>
                                                <#if subCategory2.state == 1>
                                                    <a class="grey tooltip-success stateCategory" href="${ctx}/admin/category/state.do?id=${subCategory2.id!}&state=0" data-rel="tooltip"  > <span class="label label-info">隐藏</span></a>
                                                    <#else>
                                                        <a class="light-grey tooltip-success stateCategory" href="${ctx}/admin/category/state.do?id=${subCategory2.id!}&state=1" data-rel="tooltip"  ><span class="label label-info">显示</span></a>
                                                </#if>
                                                <a class="red tooltip-error delete" href="${ctx}/admin/category/delete.do?id=${subCategory2.id!}" data-rel="tooltip" title="删除" data="${subCategory2.id!}"><span class="label label-danger">删除</span></a>
                                            </div>

                                            <div class="hidden-md hidden-lg">
                                                <div class="inline position-relative">
                                                    <button class="btn btn-minier btn-yellow dropdown-toggle" data-toggle="dropdown" data-position="auto">
                                                        <i class="ace-icon fa fa-caret-down icon-only bigger-120"></i>
                                                    </button>

                                                    <ul class="dropdown-menu dropdown-only-icon dropdown-yellow dropdown-menu-right dropdown-caret dropdown-close">

                                                        <#if subCategory2.level lt 3>
                                                            <li><a href="${ctx}/admin/category/add.html?parentId=${subCategory2.id!}" class="tooltip-success addSub" data-rel="tooltip" title="添加子分类" data-toggle="modal" data-target="#editModal"> <span class="green"><i class="ace-icon fa fa-pencil-square-o bigger-120"></i></span></a></li>
                                                        </#if>
                                                        <li><a href="${ctx}/admin/category/view.html?id=${subCategory2.id!}" class="tooltip-success edit" data-rel="tooltip" title="编辑" data-toggle="modal" data-target="#editModal"> <span class="green"><i class="ace-icon fa fa-pencil-square-o bigger-120"></i></span></a></li>
                                                        <#if subCategory2.state == 1>
                                                            <li><a href="${ctx}/admin/category/state.do?id=${subCategory2.id!}&state=0" class="tooltip-success stateCategory" data-rel="tooltip" title="隐藏" > <span class="green"><i class="ace-icon fa fa-pencil-square-o bigger-120"></i></span></a></li>
                                                            <#else>
                                                                <li><a href="${ctx}/admin/category/state.do?id=${subCategory2.id!}&state=1" class="tooltip-success stateCategory" data-rel="tooltip" title="显示" > <span class="green"><i class="ace-icon fa fa-pencil-square-o bigger-120"></i></span></a></li>
                                                        </#if>


                                                        <li><a href="${ctx}/admin/category/delete.do?id=${subCategory2.id!}" class="tooltip-error delete" data-rel="tooltip" title="删除" data="${subCategory2.id!}"> <span class="red"><i class="ace-icon fa fa-trash-o bigger-120"></i></span></a></li>
                                                    </ul>
                                                </div>
                                            </div>
                                        </td>
                                    </tr>
                                </#list>
                            </#if>
                        </#list>
                    </#if>
                </#list>
                </tbody>
            </table>
        <@pagination pageList!/>
            </form>
        </div>
    </div>

    <div id="editModal" class="modal fade" data-backdrop="static">
        <div class="modal-dialog">
            <div class="modal-content">
            </div>
        </div>
    </div>
</@mainlayout>